<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
<!--子模版便利出子组件的数据-->


<!--这里主要是子组件在父组件中注册，父组件调用子组件，将父组件的数据传递给子组件-->


<!--过程
	首先在在父组件中将movies数据据赋值给cmovies
	cmovies因为绑定的原因，固子组件中的props属性便是父组件中的movies传来的值
	子组件将cmovies遍历和渲染出来
-->



		<div id="app">
			<cpn :cmovies='movies' :cmessage='message'></cpn>
		</div>
		<template id='cpn'>
			<div>
				<ul>
					<li v-for="item in cmovies">{{item}}</li>
				</ul>
				<p>{{cmessage}}</p>
			</div>
		</template>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//父传子
			const cpn = {
				template: '#cpn',
				// props: ['cmovies', 'cmessage']
				props: {
					// 1.类型限制
					// cmovies: Array,
					// cmessage: String
					// 2.提供一些默认值，以及必传值
					cmovies: {
						type: Array,
						default: 'arraaa',
						required: true
					},
					cmessage: {
						type: String,
						default: 'sssss',
						required: false
					}
				}
			}
			const app = new Vue({
				el: '#app',
				data: {
					message: 'hello',
					movies: ['格列夫游记', '繁星春水', '昆虫记']
				},
				components: {
					cpn
				}
			})
		</script>
	</body>
</html>
